<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: 14180
  Date: 2020/9/23
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/layer/2.4/layer.js"></script>

<head>
    <title>课程信息管理</title>
</head>
<body>
<div>
    <h6></h6>
</div>
<div>
    <button class="button bg-blue" onclick="addCourse()">新增课程</button>
    <%--<button class="button bg-green" href="" onclick="refresh()">刷新</button>--%>
    <a class="button bg-green" href="javascript:location.replace(location.href);"onclick="refresh()" ><i>刷新</i></a>
</div>
<div align="center" >
    <tr>
    <input class="form-control" id="search"  type="text" style="width: 400px" placeholder="请输入用户课程名、上课教室、课程类型"><button class="button bg-green" data-dismiss="modal" onclick="courseSeek()">搜索</button>
    </tr>
</div>
<div class="margin">
    <table class="table table-hover bg-back">
        <thead>
        <tr>
            <td>编号</td>
            <td>课程名</td>
            <td>上课时间</td>
            <td>上课教室</td>
            <td>上课周期</td>
            <td>课程类型</td>
            <td>操作</td>
        </tr>
        </thead>

        <tbody id="tb">

        </tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin" align="center">
    每页显示 <select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" selected="selected">2</option><%-- selected默认--%>
    <option value="5">5</option>
    <option value="10">10</option>
    </select> 条数据，当前是第<span id="courrentPageSpan"></span> 页，
    总共<span id="totalPageSpan"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>

<%--编辑课程的模态框--%>
</div>
<div class="modal" id="editModel">
    <div class="modal-dialog">
        <div class="modal-content">

        <div class="modal-header">
            <h4>编辑课程信息</h4>
        </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入课程名">
                <label class="control-label">上课时间</label>
                <input class="form-control" type="text" id="timeInput" placeholder="请输入上课时间">
                <label class="control-label">上课教室</label>
                <input class="form-control"  type="text" id="roomInput" placeholder="请输入上课教室">
                <label class="control-label">上课周期</label>
                <input class="form-control" type="text" id="weekInput" placeholder="请输入上课周期">
                <label class="control-label">课程类型</label>
                <input class="form-control" type="text" id="typeInput" placeholder="请输入课程类型(选修课或必修课)">
                <input type="hidden" id="IdInput">
            </div>
            <div class="modal-footer">
                <%--data-dismiss="modal"是点击后，模态框就消失了--%>
                <button class="button bg-yellow" data-dismiss="modal">取消</button>
                <button class="button bg-green" onclick="editConfirm()">确定</button>

            </div>

        </div>

    </div>

</div>
<%--添加模态框--%>
</div>
<div class="modal" id="addEditModel">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4>添加课程信息</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <input class="form-control" type="text" id="nameIn" placeholder="请输入课程名">
                <label class="control-label">上课时间</label>
                <input class="form-control" type="text" id="timeIn" placeholder="请输入上课时间">
                <label class="control-label">上课教室</label>
                <input class="form-control"  type="text" id="roomIn" placeholder="请输入上课教室">
                <label class="control-label">上课周期</label>
                <input class="form-control" type="text" id="weekIn" placeholder="请输入上课周期">
                <label class="control-label">课程类型</label>
                <input class="form-control" type="text" id="typeIn" placeholder="请输入课程类型(选修课或必修课)">
                <input type="hidden" id="IdIn">
            </div>
            <div class="modal-footer">
                <%--data-dismiss="modal"是点击后，模态框就消失了--%>
                <button class="button bg-yellow" data-dismiss="modal">取消</button>
                <button class="button bg-green" onclick="addEditConfirm()">确定</button>

            </div>

        </div>

    </div>

</div>


<script>
    //当前页码
    var currentPage=1;
    //每页的记录个数
    var pageSize=2;
    //总共有多少页
    var totalPage;
    $(function () {
       // loadList();
        loadListByPage();
    });
    //用户修改的每页的记录数
    function onSelectChange() {
        //用户修改页码数
        pageSize=$("#pageSizeSelect").val();
        loadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        loadListByPage();

    }
    //上一页回调方法
    function prePage() {
        currentPage--;
        if(currentPage<1){
            currentPage=1;
        }
        loadListByPage();
    }
    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if(currentPage>totalPage){
            currentPage=totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage() {
        currentPage=totalPage;
        loadListByPage();
    }
    //分页
    function loadListByPage() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getCourseByPage",
            type: "get",
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType: "json",
            success: function (result) {
              /*  console.log(result.courseList);*/
                if (result.code == 0) {
                    showList(result.courseList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#courrentPageSpan").html(currentPage);
                }
            },
            error: function (err) {
            }

        })
    }
/*展示课程信息*/
    function showList(courseList) {
        console.log(JSON.stringify(courseList));
        var html = '';
        //遍历userList数组
        for (var i = 0; i < courseList.length; i++) {
            //拿到一个用户信息
            var item = courseList[i];
            console.log(JSON.stringify(item))
            html += "<tr>";
            html += "<td>" + item.courseId + "</td>";//显示课程编号
            html += "<td>" + item.courseName + "</td>";//显示课程名
            html += "<td>" + item.courseTime + "</td>";//显示上课时间
            html += "<td>" + item.classRoom + "</td>";//显示上课教室
            html += "<td>" + item.courseWeek + "</td>";//显示上课周期
            html += "<td>" + item.courseType + "</td>";//显示课程类型
            html += "<td><button class='button bg-sub' onclick='getCourseDetail(\"" + item.courseId + "\")'>编辑</button> " +
                "<button class='button bg-red' onclick='deleteOneUser(\""+item.courseId+"\")'>删除</button></td>";//操作
            html += "</tr>";
        }
        $("#tb").html(html);

    }

    /*模糊查询*/
    function courseSeek() {
        var searchValue=$("#search").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/course/search",
            type:"get",
            contentType:'application/x-www-form-urlencoded',
            data:{"search":searchValue},
            dataType:"json",
            success:function (result) {
                showList(result.courseList);

            },
            error:function () {

            }
        })

    }
    /*添加课程显示模态框*/
    function addCourse() {
        //显示模态框
        $("#addEditModel").modal("show");

    }

    function addEditConfirm(){
        /*获取对应的id的value值*/
        var courseNameValue=$("#nameIn").val();
        var courseTimeValue=$("#timeIn").val();
        var classRoomValue=$("#roomIn").val();
        var courseWeekValue=$("#weekIn").val();
        var courseTypeValue=$("#typeIn").val();
        var dataValue={courseName:courseNameValue,courseTime:courseTimeValue,
            classRoom:classRoomValue,courseWeek:courseWeekValue
            ,courseType:courseTypeValue};
        $.ajax({
            url: "${pageContext.request.contextPath}/course/addPage",
            type: "post",//数据量大，用post
            contentType:'application/x-www-form-urlencoded',//指明是个普通表单提交
            data:dataValue,
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    layer.msg(result.message,{icon:1});
                   /* alert(result.message);*/
                    //再次分页加载数据并显示页面上
                    $("#addEditModel").modal("hide");//关闭模态框
                    loadListByPage();
                }else {
                    layer.msg(result.message,{icon:1});
                }
            },
            error: function (err) {
            }

        })


    }
    //逻辑删除
    function deleteOneUser(courseId) {
        $.ajax({
            url:"${pageContext.request.contextPath}/course/getdelete1",
            type:"get",
            data:{"courseId":courseId},
            dataType:"json",
            success:function (result) {
                if(result.code==0){
                    layer.msg(result.message,{icon:1});
                    loadListByPage();
                }

            },error:function (err) {

            }
        })
    }

    //加载用户列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getcourse",
            type: "get",
            dataType: "json",
            success: function (result) {
                console.log(result.courseList);
                if (result.code == 0) {
                    showList(result.courseList);
                }
            },
            error: function (err) {
            }

        })
    }
    /*刷新*/
    function refresh(){
      layer.msg("刷新成功",{icon:1,time:2000},function () {

            loadListByPage();
        });

    }


    /*获取课程的详细信息*/
    function getCourseDetail(courseId) {

            $.ajax({
                url: "${pageContext.request.contextPath}/course/getone",
                type: "get",
                data:{"courseId": courseId},//传递一个参数
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        //显示模态框数据
                        showEditModal(result.course);
                    }else {
                        alert(result.message)
                    }
                },
                error: function (err) {
                }

            })


    }
    //显示课程编辑的模态框
    function showEditModal(course) {
        $("#IdInput").val(course.courseId);//传递id
        $("#nameInput").val(course.courseName);//编辑课程名
        $("#timeInput").val(course.courseTime);//上课时间
        $("#roomInput").val(course.classRoom);//上课教室
        $("#weekInput").val(course.courseWeek);//课程周期
        $("#typeInput").val(course.courseType);//课程类型
        $("#editModel").modal("show");
    }
    /*修改后，添加在数据库中*/
    function editConfirm(){
        var courseIdValue=$("#IdInput").val();
        var courseNameValue=$("#nameInput").val();
        var courseTimeValue=$("#timeInput").val();
        var courseRoomValue=$("#roomInput").val();
        var courseWeekValue=$("#weekInput").val();
        var courseTypeValue=$("#typeInput").val();
        var dataValue={courseId:courseIdValue,courseName:courseNameValue
        ,courseTime:courseTimeValue,courseRoom:courseRoomValue,courseWeek:courseWeekValue
        ,courseType:courseTypeValue};
        $.ajax({
            url: "${pageContext.request.contextPath}/course/eidt",
            type: "post",//数据量大，用post
            contentType:'application/x-www-form-urlencoded',//指明是个普通表单提交
            data:dataValue,
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                  //再次分页加载数据并显示页面上
                    $("#editModel").modal("hide");//关闭模态框
                    loadListByPage();
                }else {
                    alert(result.message)
                }
            },
            error: function (err) {
            }

        })

    }

</script>
</body>
</html>
